extends layout

block content
  div
    h2 Mongoose Jobs
  
  style.
    .job {
      position: relative;
      cursor: pointer;
      border: 1px solid #eef0f1;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 4px;
      transition: all .2s ease-in-out;
    }

    .job .company-logo {
      vertical-align: top;
      display: inline-block;
      margin-top: 0.25em;
      margin-right: 0.75em;
    }

    .job .title {
      color: #0971B2;
    }

    .job .company-logo img {
      width: 60px;
      height: auto;
      border: 0px;
    }

    .job .description {
      display: inline-block;
      width: 600px;
      margin-top: 0.25em;
      cursor: pointer;
    }

    .job .company {
      font-weight: bold;
    }

    .job:hover {
      background-color: #eef0f1;
    }

    .job.active {
      background-color: #eef0f1;
    }

    .job .at {
      color: #495057;
    }

    .post .title {
      font-size: 1.5em;
      margin-bottom: 0.25em;
    }

    .post .tags {
      margin-top: 1em;
    }

    .post .tags .tag {
      color: white;
      background-color: #208E96;
      border-radius: 3px;
      padding: 5px;
      margin-right: 0.5em;
    }

    .post .tags .tag a {
      color: white;
    }

    input[type="checkbox"] {
      display: none;
    }

    input + div + div + .job-description {
      display: none;
    }

    input:checked + div + div + .job-description {
      display: block;
    }

    .job-description .apply {
      font-size: 1.5em;
      padding-top: 0.75em;
      padding-bottom: 0.75em;
      margin-top: 0.75em;
      width: 180px;
      background-color: #4DBA13;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      margin-left: auto;
      margin-right: auto;
      color: white;
      font-weight: bold;
    }

  div
    each job in jobs
      .post.job(id='job-' + job._id)
        .company-logo
          img(src=job.logo)
        label.description(for='checkbox-' + job._id)
          input(id='checkbox-' + job._id, type="checkbox")
          div.title #{job.title}
          div.at
            span at
            span.company &nbsp;#{job.company}
            span.location &nbsp;&bull; #{job.location} 
          div.job-description
            div !{job.description}

            a(href=job.url)
              div.apply Apply

  script window.jobs = !{JSON.stringify(jobs)};
  script.
    (function() {
      if (window.location.hash != null && window.location.hash.length > 1) {
        const jobId = window.location.hash.replace(/^#/, '');
        const job = window.jobs.find(job => job._id === jobId);
        if (job != null) {
          document.querySelector('#job-' + job._id).classList.add('active');
          document.querySelector('#checkbox-' + job._id).checked = true;
        }
      }
    })();
  
  h2 Add Your Own
  div.
    Hiring Node.js and MongoDB developers?
    <a href="https://github.com/sponsors/mongoosejs">Sponsor Mongoose on GitHub to post your job here!</a>